<template>
  <div class="taxi-content">
<!--    <tip></tip>-->
    <div id="container"></div>
    <div class="taxi-location border-top-1px">
      <div class="location">
        <div class="location-item location-from" @click="show_suggest('getOn')" >
          <p class="location-field">{{address.start || formattedAddress || '您在哪儿上车'}}</p>
        </div>
        <div class="location-to-mask"></div>
        <div class="location-item location-to location-item-inputed" @click="show_suggest('getOff')">
          <p class="location-field">{{address.end || '输入您的目的点'}}</p>
        </div>
      </div>
    </div>
<!--    <div class="taxi-rule border-top-1px">-->
<!--      <i class="mfic-time"></i>-->
<!--      <icon name="clock-o" scale=0.8></icon>-->
<!--      <span>现在出发</span>-->
<!--    </div>-->
<!--    <compute-price></compute-price>-->
  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
import Icon from 'vue-awesome/components/Icon'
import tip from '@/components/tip'
import computePrice from '@/components/computePrice'
import amap from '@/components/public/amap.vue'
import {mapActions,mapState,mapGetters} from 'vuex'
export default {
  computed: {
    ...mapState([
      'position',
      'address',
      'formattedAddress'
    ])
  },
  watch: {
    position(oldVal,newVal) {}
  },
  created() {
  },
  mounted() {
    let _this = this

    var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 13
    });
    AMap.plugin('AMap.Geolocation', function() {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：5s
        buttonPosition:'RB',    //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showCircle: false
        // zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
          onComplete(result)
        }else{
          onError(result)
        }
      });
    });

    //解析定位结果
    function onComplete(data) {
      console.log(data.position.lat)
      if(_this.$store.state.startLocation == null) {
        _this.$store.state.startLocation = data.position
      }
      _this.$store.state.position = data.position
      _this.$store.state.passengerPosition = data.position
      _this.$store.state.formattedAddress = data.formattedAddress
      // _this.$store.state.address.start = data.formattedAddress
      _this.$store.state.addressComponent = data.addressComponent
      _this.$store.state.addressComponent.city = data.addressComponent.city.slice(0,data.addressComponent.city.length-1)
    }
    //解析定位错误信息
    function onError(data) {
      console.log("定位失败:" + data.message)
    }
  },
  methods: {
      show_suggest(key) {
          this.$store.dispatch('show_suggest',key)
          this.$router.push({path: '/suggest', query: {key: key}})
      }
  },
  components:{
    Icon,
    tip,
    computePrice,
    amap
  }
}
</script>
<style scoped>
#container{
  z-index: 99;
  width: 100%;
  height: 160px;
}
.taxi-location{
  position: relative;
  top: 140px;
  z-index: 99;
}
.fa-icon {
  vertical-align: middle;
}
.taxi-content {
  position: relative;
  top: 1px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,.2);
  color: #999;
  height: 235px;
  /*background-color: #333;*/
  border: solid #d7d7d7 1px;
  text-align: left;
  overflow: hidden;
}
.border-bottom-1px, .border-left-1px, .border-right-1px, .border-top-1px {
    position: relative;
}
.border-bottom-1px:after, .border-bottom-1px:before, .border-left-1px:after, .border-left-1px:before, .border-right-1px:after, .border-right-1px:before, .border-top-1px:after, .border-top-1px:before {
    content: "";
    display: block;
    position: absolute;
    transform-origin: 0 0;
}
.border-top-1px:before {
    border-top: 1px solid #ebebeb;
    left: 0;
    top: 0;
    width: 100%;
}
.location {
  padding-left: 5px;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  background-color: #fff;
}
.location-from{
  font-size: 12px;
  color: #3cbca3;
}
.location-item {
    position: relative;
    padding-left: 38px;
    padding-right: 16px;
}
.location-item:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: #3cbca3;
}
.location-field {
    padding: 17px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.border-bottom-1px:after {
    border-bottom: 1px solid #ebebeb;
    left: 0;
    bottom: 0;
    width: 100%;
    transform-origin: 0 bottom;
}
.location-item-inputed {
  margin-top: -10px;
    color: #000;
}
.location-item:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: #3cbca3;
}
.location-to-mask{
  position: absolute;
  top: 40px;
  left: 10px;
  width: 94%;
  border-radius: 5px;
  height: 43px;
  background-color: rgba(59, 98, 180, 0.1);
}
.location-to:before {
    background-color: #fc9153;
}
.location-field {
    padding: 17px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.taxi-rule {
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #666;
}
.taxi-rule>span {
    vertical-align: middle;
}
</style>
